<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="/js/vue.global.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/axios-helper.js"></script>
		<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
		<script src="//unpkg.com/element-plus"></script>
		<!-- 使用图标 -->
		<script src="https://unpkg.com/@element-plus/icons-vue"></script>
	</head>
	<body>
		<div id="app">
			<el-table :data="entities" stripe border style="width:100%">
				<el-table-column prop="id" label="ID" width="45"></el-table-column>
				<el-table-column prop="name" label="名字" width="120"></el-table-column>
				<el-table-column prop="subject" label="学科" width="90"></el-table-column>
				
				<!-- 修改学生列 -->
				<el-table-column label="学生" width="120">
					<template #default="scope">
						{{ getStudentName(scope.row.sid) }}
					</template>
				</el-table-column>
				
				<el-table-column label="操作" width="220px">
					<template #default="scope">
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<el-pagination
					v-model:current-page="pageNumber"
					v-model:page-size="pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:background="true"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"></el-pagination>
		</div>
		
		<script>
			const {createApp, ref, onMounted} = Vue
			const app = createApp({
				setup(){
					const entities = ref([]);
					const students = ref([]);
					
					const pageNumber = ref(1);
					const pageSize = ref(5);
					const total = ref(0);
					
					// 根据学生ID查找学生名字
					const getStudentName = (sid) => {
						const student = students.value.find(student => student.id === sid);
						return student ? student.name : '未知学生';
					};
					
					const handleSizeChange = (val) => {
						pageSize.value = val;
						query();
					};
					const handleCurrentChange = (val) => {
						pageNumber.value = val;
						query();
					};
					
					const findStudents = () => {
						axios.get("/stu/list").then((result) => {
							students.value = result.data;
						}).catch((errorMsg) => {
							ElementPlus.ElMessage({
								type: "error",
								message: errorMsg,
								showClose: true,
							});
						});
					}
					
					const params = ref({});
					const query = () => {
						axios.get(`/teacher/query/${pageNumber.value}/${pageSize.value}`, {
							params: params.value
						}).then((result) => {
							console.log(result);
							entities.value = result.data.records;
							total.value = result.data.total;
						}).catch((errorMsg) => {
							ElementPlus.ElMessage({
								type: "error",
								message: errorMsg,
								showClose: true,
							});
						});
					};
					
					const handleDelete = (row) => {
						ElementPlus.ElMessageBox.confirm(
								`确定删除【${row.name}】的记录吗？`,
								'提示',
								{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								}
						).then(() => {
							axios.post('/teacher/remove?id='+row.id)
									.then(() => {
										ElementPlus.ElMessage({
											type: 'success',
											message: '删除成功',
											showClose: true,
										});
										query();
									})
									.catch((errorMsg) => {
										ElementPlus.ElMessage({
											type: 'error',
											message: errorMsg,
											showClose: true,
										});
									});
						}).catch(() => {
							ElementPlus.ElMessage({
								type: 'info',
								message: '已取消删除',
								showClose: true,
							});
						});
					};
					
					onMounted(() => {
						query();
						findStudents(); // 查询学生列表
						getStudentName();
					});
					
					return {
						entities,
						pageNumber,
						pageSize,
						total,
						handleSizeChange,
						handleCurrentChange,
						query,
						students,
						getStudentName,
						handleDelete,
					}
				}
			})
			app.use(ElementPlus);
			for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
				app.component(key, component);
			}
			app.mount('#app');
		</script>
	</body>
</html>
